<template>
  <div class="teacher-login">
    <div class="login-form w1200">
      <div class="register-wrap">
        <img
          class="register-png"
          src="~assets/teacher/teacher-login.png"
          alt=""
        />
        <div class="register-form">
          <h2>教师登录</h2>
          <a-form-model ref="registerForm" :model="registerForm" :rules="rules">
            <a-form-model-item prop="username">
              <a-input
                v-model="registerForm.username"
                autocomplete="off"
                @focus="clearValidate('registerForm', 'username')"
              >
                <template slot="prefix">
                  <YxpIcon type="iconlogin_icon_account" />
                  <span>账号</span>
                </template>
              </a-input>
            </a-form-model-item>
            <a-form-model-item prop="password">
              <a-input
                v-model="registerForm.password"
                type="password"
                autocomplete="off"
                @focus="clearValidate('registerForm', 'password')"
              >
                <template slot="prefix">
                  <YxpIcon type="iconlogin_icon_password" />
                  <span>密码</span>
                </template>
              </a-input>
            </a-form-model-item>
            <a-form-model-item prop="read" label="">
              <a-checkbox v-model="registerForm.read">
                我已阅读并接受
                <a @click="openUrl('/registration')"
                  >《用户注册协议》</a
                ><a @click="openUrl('/privacyprotection')"
                  >《隐私权保护政策》</a
                >
              </a-checkbox>
            </a-form-model-item>
            <a-button
              type="primary"
              htmlType="submit"
              block
              size="large"
              shape="round"
              @click="submitForm"
              >登录</a-button
            >
          </a-form-model>
          <p class="forget-text" @click="forget">忘记密码</p>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import { FormModel, Input, Checkbox } from "ant-design-vue";
import { assignLogin } from "@/services";
import Footer from "@/components/layout/Footer";
import { validatePhone, validatePass } from "@/utils/form-validate";
import { mapState, mapMutations } from "vuex";
import mTypes from "@/store/mutationsTypes";
import _ from "lodash";
import {openBrowser} from '@/utils/tools'
export default {
  name: "teacherLogin",
  components: {
    Footer,
    AFormModel: FormModel,
    AFormModelItem: FormModel.Item,
    AInput: Input,
    ACheckbox: Checkbox
  },
  data() {
    return {
      registerForm: {
        username: '',
        password: '',
        read: true
      },
      rules: {
        username: [{ validator: validatePhone, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        read: [{ required: true, message: "请确认勾选阅读协议" }]
      }
    };
  },
  computed: {},
  watch: {},
  methods: {
    ...mapMutations([mTypes.forgetModal]),
    openUrl (remoteUrl) {
      const url = `/#${remoteUrl}`
      openBrowser(url)
    },
    submitForm () {
      this.$refs.registerForm.validate(async valid => {
        if (valid) {
          let res = await assignLogin(_.omit(this.registerForm, "read"))
          if (res.code === 1) {
            this.$message.success("登录成功")
            this.$router.push("/mycourse")
          }
        }
      })
    },
    clearValidate (form, filed) {
      this.$refs[form].clearValidate(filed)
    },
    forget () {
      this[mTypes.forgetModal]({ visible: true, type: 'teacher' })
    }
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {}
};
</script>
<style lang="less" scoped>
/* @import url(); 引入公共css类 */
.teacher-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  .login-form {
    min-height: calc(100vh - 150px);
  }
  .register-wrap {
    display: flex;
    min-height: calc(100vh - 230px);
    align-items: center;
    justify-content: space-around;
    padding: 60px 0;
    margin: 20px; /* no */
    .register-png {
      width: 482px;
      height: 334px;
    }
  }

  .register-form {
    width: 390px; /* no */
  }
  .forget-text {
    text-align: center;
    margin-top: 20px;
    cursor: pointer;
  }
}
</style>
